<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <!-- 切换成完全体  -->
    <!-- <script src="./js/bootstrap.js"></script> -->
    <script src="./js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./css/bs-slide.css">
    </link>

</head>

<body>
    <!-- data-bs-interval="2000" 切换毫秒 -->
    <div id="cs" class="carousel slide" data-bs-ride="carousel" 
    style="width: 300px; height: 200px; border: 2px solid red;">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="ty-picture1"></div>
            </div>
            <div class="carousel-item" >
                <div class="ty-picture2"></div>
            </div>
            <div class="carousel-item">
                <div class="ty-picture3"></div>
            </div>
        </div>
        <div class="carousel-indicators">
            <button data-bs-target="#cs" data-bs-slide-to="0" class="active"></button>
            <button data-bs-target="#cs" data-bs-slide-to="1"></button>
            <button data-bs-target="#cs" data-bs-slide-to="2"></button>
        </div>
    </div>
    <div class="carousel slide" data-bs-ride="carousel" >
        <div class="carousel-inner">
            <div class="carousel-item active">
               ${1:pic1}
            </div>
            <div class="carousel-item" >
               ${2|first,second|}
            </div>
        </div>
        <div class="carousel-indicators">
            <button data-bs-target="#cs" data-bs-slide-to="0" class="active"></button>
            $0
        </div>
    </div>

</body>

</html>